How to embed style in HTML document

<html>
  <STYLE TYPE="text/css">
    BODY { color:green }
  </STYLE>
<body>
<body>
HELLO
</html>

More info and samples on: www.devarchweb.net

How to refer to style in another file (2 options)

<html>
<STYLE type="text/css">
@import "mystyle.css";
</STYLE>
<body>
This is a text
</body>
</html>

More info and samples on: www.devarchweb.net

How to set style for all LI elements

LI { color:blue }

More info and samples on: www.devarchweb.net

What are DIV and SPAN Both <div> and <span> elements are be used to create a connection between an HTML element and style.
The difference is that DIV is a block-level element and SPAN is an inline element.
DIV can contain SPAN, SPAN cannot contain DIV. Next element after DIV section will start on new line.

More info and samples on: www.devarchweb.net

How to apply style directly

<p style="color: pink">Paragraph text.</p>
<div style="color: blue">
Use style directly
<ul>
<li>XX</li>
<li><span style="color: red">YY</span></li>
<ul>
</div>

More info and samples on: www.devarchweb.net

How to use a style class

<html>
  <STYLE TYPE="text/css">
   .myStyle {color:blue; } /* style can be applied to any element */
   p.myStyle {color:blue; } /* style will applied to all p elements with class="myStyle" - see style precedence bellow */
   .myStyle2 {color:red; }
   p {color:green; } /* style for all paragraphs */
   #myTextBox {color:gray; } /* style element(s) with id="myTextBox" */
  </STYLE>
<body>
<p class="myStyle">Paragraph text.</p>
<div class="myStyle">
Refer by class
<ul>
   <li>XX</li>
   <li><span class="myStyle2">YY</span></li>
<ul>
</div>
</body>
</html>

More info and samples on: www.devarchweb.net

Style precedence 1. Direct style <div style="color : black">
2. Id related style #named {color : yellow; } <div id="named">
3. Element style div.myStyle {color : magenta; } <div class="myStyle">
4. Style for element type <div style="color : black">
5. Generic style (any element) .myStyle {color : blue; } <div class="myStyle">

.myStyle {color:blue; }
div {color:red; }

<div class="myStyle">

div {color:red; }
div.myStyle {color : magenta; }

<div class="myStyle">

div.myStyle {color : magenta; }
#named {color:yellow; }

<div id="named"> class="myStyle">

#named {color:yellow; }

<div id="named" style="color : black">

More info and samples on: www.devarchweb.net

Available selector combinations

div p // get all P that are DIV descentants
div > p // get all P that are DIV children
div + p // get all P that is first following sibling of DIV
div ~ p // get all P that are following siblings of DIV - CSS 3
div p + img // get all IMG that is first following sibling of P in DIV

More info and samples on: www.devarchweb.net

Describe pseudo classes

:first-child { }

/* dynamic */
:hover { background-color: yellow } /* mouse over */
:focus { background-color: yellow }
:active { } /* being clicked */

/* link only */
a:link { } /* unvisited */
a:visited { }

More info and samples on: www.devarchweb.net

Describe pseudo elements

/* prepends and appends given content */
:before { content:"+++"; }
:after { content:"+++"; }

/* changes look */
:first-line { }
:first-letter { }

More info and samples on: www.devarchweb.net

Describe attribute selectors

img[alt] {} /* all elements with alt attribute */
img[alt=graph] /* all elements with alt="graph" */
div[title~="stock"] /* all divs with title containing space separated WORD stock */
img[src*="ie"] /* all img elements containing text "ie" - CSS 3 */
img[src^="top"] /* all img elements with src starting with "top" - CSS 3 */
img[src$".png"] /* all eimg lements with src ending .png - CSS 3 */
img[alt=graph][src$\\.png] /* combining attributes with AND */

More info and samples on: www.devarchweb.net

Text style

text-color:red;
text-decoration:underline; /* overline, linethrough */
text-shadow: 3px 3px gray;

text-align:right; /* center, justify */
text-indent:25px;

More info and samples on: www.devarchweb.net

Font style

font-style: italic;
font-weight: bold;
font-size: 12px; /* 50%, 1em(=16px) */

More info and samples on: www.devarchweb.net

Border style

border: 5px dotted red;

Available styles:
dotted, dashed, solid, double, inset, outset, ridge groove:

Style can be specified for one edge only

border-top-style: blue;

More info and samples on: www.devarchweb.net

Background style

p {
background-color:green;
background-image:url("myphoto.png");
}

More info and samples on: www.devarchweb.net

List style

ul.myList {list-style-type: circle;} /* square, lower-alpha, upper-roman; */

More info and samples on: www.devarchweb.net

Describe box model

<div style="background-color: orange" >
<div style="background-color:yellow;
margin: 10px 10px 10px 10px;
outline:dotted 3px blue; /* not included in box geometry */
border: solid 5px red;
padding: 20px;
width:200px; height:150px
">Hello</div>
</div>

More info and samples on: www.devarchweb.net

What are 4 available ways to position elements. How to deal with overlapping elements.

/* static - default, elements are ordered in standard flow */

/* elements are displayed relatively to standard flow position. The position remains reserved */
position:relative; left:30px; top:-10px;

/* element is located in absolute position from parent (visual position changes when user scrolls) */
position:absolute; left:100px; top:150px;

/* absolute could be used to "anchor" blocks */
position:absolute; left:100px; right:50px

/* element is located in absolute position from browser view area (visual position does not change when user scrolls) */
position:fixed; top:30px; right:5px

/* When elements overlaps, z index can be used to define which elements is on the top. Can be negative */
z-index:-1;

More info and samples on: www.devarchweb.net

Floating of elements Floating specifies which way one element will flow the in the containing element

float:right;

if the floating elements should cover a rectangular area, clear will ensure that e.g. text after will be pushed
out from that area and start under the section with floating elements

clear: both;

More info and samples on: www.devarchweb.net

How to define min and max sizes

min-width:100px;
max-width:200px;
min-height:100px;
max-height:200px;

More info and samples on: www.devarchweb.net

Block/Inline style

.inlineStyle {display:inline;}
.blockStyle {display:block;}
.hiddenStyle {display:none} /* does not occupy space */

.invisible {visibility:hidden;} /* occupies space */

More info and samples on: www.devarchweb.net

How can you control overflow of content

When containing element is not able to display the whole content then overflow element can define behavior of the container
overflow:auto; /* scrollbar visible when needed */
overflow:scroll; /* scrollbar always visible */
overflow:visible; /* overflowen text is visible outside of borders */
overflow:hidden; /* overflowen text is not visible */